<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>微调按钮插件</title>
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="style8.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
    微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，
    调用格式如下：$(selector).spinner({options});
    selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。
</pre></h2>
<div id="divtest">
    <div class="title">
        选择颜色值</div>
    <div class="content">
                <span id="spnColor" class="input fl">
                    <input />
                </span>
        <span id="spnPrev" class="prev fr"></span>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        //定义变量
        var intR = 0, intG = 0, intB = 0, strColor;
        $("input").spinner({
            //初始化插件
            max: 10,
            min: 0,
            //设置微调按钮递增/递减事件
            spin: function (event, ui) {
                if (ui.value == 8)
                    spnPrev.style.backgroundColor = "red";
                else
                    spnPrev.style.backgroundColor = "green";
            },
            //设置微调按钮值改变事件
            change: function (event, ui) {
                var intTmp = $(this).spinner("value");
                if (intTmp < 0) $(this).spinner("value", 0);
                if (intTmp > 10) $(this).spinner("value", 10);
                if (intTmp == 8)
                    spnPrev.style.backgroundColor = "red";
                else
                    spnPrev.style.backgroundColor = "green";
            }
        });
    });
</script>
</body>
</html>